<%@ include file="/common/taglibs.jsp"%>

<head>
    <title><fmt:message key="asistanceControlList.title"/></title>
    <meta name="heading" content="<fmt:message key='asistanceControlList.heading'/>"/>
    <meta name="menu" content="RoleAdminPayment"/>

    <script type="text/javascript" src="<c:url value='/scripts/calendar/calendar.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/scripts/calendar/lang/calendar-es.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/scripts/calendar/calendar-setup.js'/>"></script>

    <script type="text/javascript">
        window.onload = function() {
            Calendar.setup({
                inputField: "asistanceDate",
                ifFormat: "%d/%m/%Y",
                button: "asistanceDate"
            });
        }
        dojo.event.topic.subscribe("/save", function(data, type, request) {
            if(type == "load") {
                dojo.byId("asistanceId").value = "";
                dojo.byId("asistanceDate").value = "";
                dojo.byId("asistanceHalfDay").checked = false;
                
                document.getElementById('deleteAsistanceForm').style.display = 'none';
                document.getElementById('cancelAsistanceButton').style.bottom = '40px';
                document.getElementById('cancelAsistanceButton').style.left = '85px';

                Effect.SlideUp('divAsistanceForm');
                $('addAsistanceButton').appear();
                return false;
            }
        });
        function editAsistance(row){
            var tds = row.getElementsByTagName("td");

            dojo.byId("asistanceId").value = dojo.string.trim(dojo.dom.textContent(tds[0]));
            dojo.byId("asistanceId1").value = dojo.string.trim(dojo.dom.textContent(tds[0]));
            dojo.byId("asistanceDate").value = dojo.string.trim(dojo.dom.textContent(tds[1]));
            if(dojo.string.trim(dojo.dom.textContent(tds[2])) == "si")
                dojo.byId("asistanceHalfDay").checked = true;
            else
                dojo.byId("asistanceHalfDay").checked = false;
            
            document.getElementById('deleteAsistanceForm').style.display = 'inline';
            document.getElementById('cancelAsistanceButton').style.bottom = '80px';
            document.getElementById('cancelAsistanceButton').style.left = '165px';

            form = document.getElementById("saveAjaxAsistance");
            clearErrorMessages(form);
            clearErrorLabels(form);

            $('addAsistanceButton').fade();
            Effect.SlideDown('divAsistanceForm');
            return false;
        }
        function cancel(){
            dojo.byId("asistanceId").value = "";
            dojo.byId("asistanceDate").value = "";
            dojo.byId("asistanceHalfDay").checked = false;
            
            document.getElementById('deleteAsistanceForm').style.display = 'none';
            document.getElementById('cancelAsistanceButton').style.bottom = '40px';
            document.getElementById('cancelAsistanceButton').style.left = '85px';

            form = document.getElementById("saveAjaxAsistance");
            clearErrorMessages(form);
            clearErrorLabels(form);

            $('addAsistanceButton').appear();
            Effect.SlideUp('divAsistanceForm');
            return false;
        }
    </script>
</head>
<div id="help">
    <h2>
        <a href="<c:url value='helpAsistanceForm.html?decorate=false'/>"
           title="<fmt:message key="help.pAF"/>"
           onclick="Modalbox.show(this.href, {title: this.title, width: 600}); return false;">
            <fmt:message key="help"/>
        </a>
    </h2>
</div>

<c:set var="buttons">
    <input id="addAsistanceButton" type="button" style="margin-right: 5px" class="button"
        onclick="$(this).fade(); Effect.SlideDown('divAsistanceForm'); return false;"
        value="<fmt:message key="button.add"/>"/>

    <input type="button" onclick="location.href='<c:url value="/backToEmployeesAsistance.html"/>'" class="button"
        value="<fmt:message key="button.done"/>"/>
</c:set>

<c:out value="${buttons}" escapeXml="false" />

<s:url id="asistanceControlListUrl" action="ajaxAsistanceControl" method="refreshAsistanceControlList">
    <s:param name="decorate" value="false" />
</s:url>

<s:div id="asistances" theme="ajax" href="%{asistanceControlListUrl}" loadingText="%{getText('ajax.loading')}..."/>

<div id="divAsistanceForm" style="width: 243px; display: none;" >
    <s:form action="saveAjaxAsistance" method="get" validate="true">
        <s:hidden name="decorate" value="false"/>
        <s:hidden id="asistanceId" name="asistanceControl.id"/>
        <s:textfield id="asistanceDate" key="asistanceControl.date" required="true" readonly="true" cssClass="text medium"/>
        <s:checkbox id="asistanceHalfDay" name="asistanceControl.halfDay" value="%{asistanceControl.halfDay}" />
        <label for="asistanceHalfDay" class="choice"><fmt:message key="asistanceControl.halfDay"/></label>

        <s:submit cssClass="button" key="button.save" theme="ajax" targets="asistances" notifyTopics="/save" cssStyle="position: relative; right: 160px;"/>
    </s:form>
    <s:form id="deleteAsistanceForm" action="deleteAjaxAsistance" method="get" cssStyle="display: none;">
        <s:hidden name="decorate" value="false"/>
        <s:hidden id="asistanceId1" name="asistanceControl.id"/>

        <s:submit cssClass="button" key="button.delete" onclick="return confirmDelete('inasistance');" theme="ajax" targets="asistances" notifyTopics="/save" cssStyle="position: relative; right: 79px; bottom: 40px;"/>
    </s:form>
    <input id="cancelAsistanceButton" type="button" class="button" value="<fmt:message key="button.cancel"/>" onclick="cancel()" style="position: relative; left: 85px; bottom: 40px;"/>
</div>
